<!doctype html>
<html lang="en">
<head>
    <title>Grid - Custom Paging</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <style type="text/css">
        .wijmo-wijgrid
        {
            min-height: 100px;
        }
    </style>

    <script id="scriptInit" type="text/javascript">
			$(document).ready(function () {

				// * local data
				$("#demo-local").wijgrid({
					allowPaging: true,
					pageSize: 5,

					data: new wijdatasource({
						dynamic: true,
						loading: function (dataSource, userData) {
							var r = userData.data.paging;
							var fooData = [];

							for (var i = r.pageIndex * r.pageSize; i < (r.pageIndex + 1) * r.pageSize; i++) {
								fooData.push({ "ID": i, "Name": "Name" + i });
							}

							dataSource.data = {
								totalRows: 100,
								rows: fooData
							}
						}
					})
				});
				// * local data

				// * remote data
 				$("#demo-remote").wijgrid({
 					allowPaging: true,
 					pageSize: 5,

 					data: new wijdatasource({
 						dynamic: true,
 						proxy: new wijhttpproxy({
 							url: "http://netflix.cloudapp.net/Catalog/Genres('Horror Movies')/Titles/",
 							dataType: "jsonp",
 							jsonp: "$callback",
 							data: {
 								$format: "json",
 								$inlinecount: "allpages",
 								$select: "Name,ReleaseYear,AverageRating,BoxArt"
 							},
 							key: "d"
 						}),

 						reader: {
 							read: function (dataSource) {
 								var count = parseInt(dataSource.data.__count, 10);

 								$("#entries").text("(" + count + " entries found)");

 								dataSource.data = dataSource.data.results;
 								dataSource.data.totalRows = count;

 								new wijarrayreader([{ name: "Name", mapping: "Name" },
 									{ name: "ReleaseYear", mapping: "ReleaseYear" },
 									{ name: "Rating", mapping: "AverageRating" },
 									{ name: "Cover", mapping: function (item) { return item.BoxArt.SmallUrl; } }]
 								).read(dataSource);
 							}
 						},

 						loading: function (dataSource, userData) {
 							var r = userData.data.paging;
 							dataSource.proxy.options.data.$skip = r.pageIndex * r.pageSize;
 							dataSource.proxy.options.data.$top = r.pageSize;
 						}
 					}),

 					columns: [
 						{}, {}, {},
 						{
 							cellFormatter: function (args) {
 								if (args.row.type & $.wijmo.wijgrid.rowType.data) {
 									args.$container
 										.css("text-align", "center")
 										.empty()
 										.append($("<img />")
 										.attr("src", args.row.data.Cover));

 									return true;
 								}
 							}
 						}
 					]

 				});
				// * remote data
			});
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Custom Paging</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <p>Custom paging using local data</p>
            <table id="demo-local">
            </table>

            <p>Custom paging using remote data <span id="entries">...</span></p>
            <table id="demo-remote">
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
            <div class="footer demo-description">
                <p>
                    This sample shows how to use custom paging using local and remote data.
                </p>
            </div>
        </div>
    </div>
</body>
</html>
